
<template>
    <div class="box">
        <el-row :gutter="20" class="first">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <div class="two">
            <el-row :gutter="20">
                <el-col :span="12" class="two-1">
                    <div class="grid-content bg-purple">1</div>
                </el-col>
                <el-col id="main" :span="12" class="two-2">
                    <div class="grid-content bg-purple"></div>
                </el-col>
            </el-row>
        </div>
        <el-row :gutter="20">
            <el-col :span="12" class="two-3 two-1">
                <div class="grid-content bg-purple">2</div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12" class="two-4">
                <div class="grid-content bg-purple">3</div>
            </el-col>
            <el-col :span="12" class="two-5">
                <div class="grid-content bg-purple">4</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    mounted() {
        // 在通过mounted调用即可
        this.echartsInit()
    },
    methods: {
        //初始化echarts
        echartsInit() {
            //因为初始化echarts 的时候，需要指定的容器 id='main'
            this.$echarts.init(document.getElementById('main')).setOption({
              
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '邮件营销',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
        }

    }
}
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #ffffff;
}

.first .bg-purple {
    background: #f6f6f6;
    height: 96px;
}

.bg-purple-light {
    background: #edeef1;
}

.two {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.two-1 {
    width: 633px;
    border-radius: 4px;
    min-height: 150px;
    height: 180px;
    background: #fff;
    border-right: 8px solid #e9eef3;
}

.two-2 {
    width: 633px;
    border-radius: 4px;
    min-height: 150px;
    background: #fff;
    border-left: 8px solid #e9eef3;
    height: 370px;
}

.two-3 {
    margin-top: -200px;
    background: #fff;
    border-radius: 4px;
    min-height: 150px;
    height: 180px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.two-4 {
    width: 633px;
    border-radius: 4px;
    min-height: 150px;
    background: #fff;
    border-right: 8px solid #e9eef3;
    height: 370px;
}

.two-5 {
    width: 633px;
    border-radius: 4px;
    min-height: 150px;
    background: #fff;
    border-left: 8px solid #e9eef3;
    height: 370px;
}
</style>